import { Component, OnInit } from '@angular/core';
import { _HttpClient, SettingsService } from '@delon/theme';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { Api } from 'src/app/shared/api/api';
import { ResponseCode } from 'src/app/shared/response.code';

@Component({
  selector: 'app-config-icon-modal',
  template: `<nz-card>
    <ul style="overflow-x: hidden; list-style: none; height:500px">
      <li
        style="position: relative;float: left;width: 16.66%;height: 60px;margin: 3px 0;padding: 10px 0 0;overflow: hidden;color: #555;text-align: center;list-style: none;background-color: inherit;border-radius: 4px;cursor: pointer;transition: color .3s ease-in-out,background-color .3s ease-in-out;"
        *ngFor="let item of data"
        (click)="selected(item)"
      >
        <i nz-icon [nzType]="item.value" [nzTheme]="item.theme"></i>
        <span
          style="display: block;font-family: Lucida Console,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;white-space: nowrap;text-align: center;transform: scale(.83);"
          >{{ item.value }}</span
        >
      </li>
    </ul>
  </nz-card>`
})
export class IconModalComponent implements OnInit {
  constructor(protected http: _HttpClient, protected settingsService: SettingsService, private modal: NzModalRef) {}
  data: any[] = [];
  ngOnInit() {
    this.query();
  }
  query() {
    this.http.get(`${Api.BaseAntIconApi}page/${1}/${1000}`).subscribe((res: any) => {
      if (res && res.code === ResponseCode.SUCCESS) {
        if (res.data) this.data = res.data.records;
      }
    });
  }

  selected(record: any): void {
    this.modal.destroy(record);
  }
}
